import { useRef } from "react";
import { Carousel, CarouselProps } from "@mantine/carousel";
import Autoplay, { AutoplayOptionsType } from "embla-carousel-autoplay";
import '@mantine/carousel/styles.css';

const AutoplayCarousel = (props: CarouselProps & { autoplayOptions?: AutoplayOptionsType }) => {
    const { autoplayOptions, plugins = [], ...restProps } = props;
    const autoRef = useRef(Autoplay({
        delay: 3000,
        ...autoplayOptions,
    }))
    return <Carousel {...restProps} plugins={[autoRef.current, ...plugins]} />
}
AutoplayCarousel.Slide = Carousel.Slide;

export default AutoplayCarousel;